<a
  class:list={[
    'relative overflow-hidden box-border flex justify-center items-center w-full gap-3 py-4 px-6 md:py-5 md:px-7 lg:px-8 lg:py-6 rounded-[6.25rem] shadow hover:shadow-md shadow-tameplum-20 text-grayscale-0 transition-all duration-200 hover:duration-500 ease-out text-base md:text-xl lg:text-2xl no-underline sm:w-auto',
    'bg-gradient-to-tl bg-size-[200%_200%] from-gradient-blue via-gradient-purple to-[#f8f7dd] bg-position-[100%_100%] hover:bg-position-[50%_50%]',
    'before:content-[""] before:animate-scroll-bg-y-slow before:transition-opacity before:skew-x-16 before:duration-200 hover:before:delay-200 hover:before:duration-[1s] before:ease-out before:opacity-0 hover:before:opacity-100 before:block before:absolute before:inset-0 before:bg-gradient-to-tr before:from-white/20 before:to-white/0 before:bg-center before:bg-size-[3rem_2rem] before:mix-blend-color-dodge',
  ]}
  href="/TypeGPU/getting-started">
  Get started
  <svg
    class="w-6 md:w-7.5 lg:w-9"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 30 30"
    fill="none">
    <path
      d="M25 15L5 15M25 15L17.5 22.5M25 15L17.5 7.5"
      stroke="white"
      stroke-width="2"
      stroke-linecap="square"
      stroke-linejoin="round"></path>
  </svg>
</a>
